<template>
	<view>
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view style="margin: 5px 0 20px 0; ">
				<!-- id -->
				<view style="margin-right: 10px;display:inline-block;border: #999 solid 1px; border-radius: 2px;">
					ID:{{detailData.id}}</view>
				<!-- name -->
				<view style="display:inline-block;font-weight: bold;">{{detailData.customerName}}</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">发票抬头类型</u-col>
				<u-col span="8">
					<span v-if="detailData.message.applyType == 1">企业</span>
					<span v-if="detailData.message.applyType == 2">个人</span>
				</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">发票抬头类型</view>
				<view class="item_content_right">
					<span v-if="detailData.message.applyType == 1">企业</span>
					<span v-if="detailData.message.applyType == 2">个人</span>
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">发票抬头</u-col>
				<u-col span="8">{{detailData.message.invoiceContent}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">发票抬头</view>
				<view class="item_content_right">
					{{detailData.message.invoiceContent}}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">纳税人识别号</u-col>
				<u-col span="8">{{ detailData.message.invoiceNumber }}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">纳税人识别号</view>
				<view class="item_content_right">
					{{ detailData.message.invoiceNumber }}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">申请开票总金额</u-col>
				<u-col span="8"><u--text mode="price" :text="detailData.invoiceAmount"></u--text></u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">申请开票总金额</view>
				<view class="item_content_right">
					￥{{ detailData.invoiceAmount }}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">客户收票邮箱</u-col>
				<u-col span="8">{{ detailData.message.relevanceEmail }}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">客户收票邮箱</view>
				<view class="item_content_right">
					{{ detailData.message.relevanceEmail }}
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">申请类型</u-col>
				<u-col span="8">
					<span v-if="detailData.message.invoiceType == 1">电子普票</span>
					<span v-if="detailData.message.invoiceType == 2">电子专票</span>
				</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">申请类型</view>
				<view class="item_content_right">
					<span v-if="detailData.message.invoiceType == 1">电子普票</span>
					<span v-if="detailData.message.invoiceType == 2">电子专票</span>
				</view>
			</view>
			<!-- <u-row customStyle="margin-bottom:10px">
				<u-col span="4">申请时间</u-col>
				<u-col span="8" v-if="detailData.applyTime">{{detailData.applyTime.substring(0,10)}}</u-col>
			</u-row> -->
			<view class="item_content">
				<view class="item_content_left">申请时间</view>
				<view class="item_content_right"  v-if="detailData.applyTime">
					{{detailData.applyTime.substring(0,10)}}
				</view>
			</view>
		</view>
		<view class="card" style="padding: 10px 10px 10px 10px;">
			<view class="title">订单详情</view>
			<view style="margin:15px 0px 10px 0px;border-bottom: 1px solid #ddd"></view>
			<!-- <u-row customStyle="margin-bottom:10px"> -->
				<view style="display: flex; flex-flow: row;justify-content: space-between;margin-bottom: 20rpx;">
					<view style="">订单号:{{dataList.orderNo}}</view>
					<view style="" v-if="dataList.createTime">{{dataList.createTime.substring(0,10)}}</view>
				</view>
			<!-- </u-row> -->
			<!-- <u-row customStyle="margin-bottom:5px"> -->
				<view style="display: flex; flex-flow: row;justify-content: space-between;margin-bottom: 10rpx;">
					<view style="">
						{{dataList.productName}}
					</view>
					<view style="">
						<u--text mode="price" :text="dataList.merchandiseMoney"></u--text>
					</view>
				</view>
			<!-- </u-row> -->
		</view>
	</view>
</template>

<script>
	import {
		getInvoceApi,
		getOrderByInvIdApi
	} from '@/api/invoce.js'
	export default {
		data() {
			return {
				invoceId: {
					id: ''
				},
				detailData: {
					message: {}
				},
				dataList: {},
			};
		},
		onLoad(row) {
			this.invoceId = row;
			this.getvoiceList();
		},
		methods: {
			getvoiceList() {
				getInvoceApi({
					invoceId: this.invoceId.id
				}).then((res) => {
					this.detailData = res.data;
				});
				this.getorderList();
			},
			//申请列表
			getorderList() {
				getOrderByInvIdApi({
					invoiceOverId: this.invoceId.id
				}).then((res) => {
					this.dataList = res.data;
				});
			},
		}
	}
</script>

<style lang="scss">
	.card {
		margin: 0 20rpx 20rpx 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.title {
		font-size: 16px;
		margin: 20rpx 0;
	}
	
	.item_content {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	
		.item_content_left {
			flex: 1;
		}
	
		.item_content_right {
			flex: 2;
		}
	}
</style>